<script lang="ts" context="module">
	import { browser, dev } from "$app/env";

	// we don't need any JS on this page, though we'll load
	// it in dev so that we get hot module replacement...
	export const hydrate = dev;

	// ...but if the client-side router is already loaded
	// (i.e. we came here from elsewhere in the app), use it
	export const router = browser;

	// since there's no dynamic data here, we can prerender
	// it so that it gets served as a static asset in prod
	export const prerender = true;

	import VPlayer from "$lib/player/VPlayer.svelte";
</script>

<svelte:head>
	<title>About</title>
</svelte:head>

<p class="bg-black bg-opacity-10 p-8">
	The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and
	form handling. Try using it with JavaScript disabled! Player below
</p>

<div class="flex flex-wrap bg-purple-500 justify-items-center m-8">
	<VPlayer />
</div>

<br />

<div class="p-8">
	<p>
		Now, this is as basic as it gets but it lays the foundation for us to
		start customizing the player to our needs. If you need to support a
		different type of media, you can follow the same steps of checking the
		available providers in the Components section, picking whichever
		supports the required media type, and following the usage guide to set
		it up. UI components are visually displayed elements inside the media
		player that may be interactable such as a playback control or slider, or
		they may be simple visual feedback such as the length of the media
		(duration). It can be quite time consuming and challenging to setup an
		entire interface for a video player, so let's start by using the default
		UI given to us out of the box...
	</p>

	<p>
		Now, this is as basic as it gets but it lays the foundation for us to
		start customizing the player to our needs. If you need to support a
		different type of media, you can follow the same steps of checking the
		available providers in the Components section, picking whichever
		supports the required media type, and following the usage guide to set
		it up. UI components are visually displayed elements inside the media
		player that may be interactable such as a playback control or slider, or
		they may be simple visual feedback such as the length of the media
		(duration). It can be quite time consuming and challenging to setup an
		entire interface for a video player, so let's start by using the default
		UI given to us out of the box...
	</p>

	<p>
		Now, this is as basic as it gets but it lays the foundation for us to
		start customizing the player to our needs. If you need to support a
		different type of media, you can follow the same steps of checking the
		available providers in the Components section, picking whichever
		supports the required media type, and following the usage guide to set
		it up. UI components are visually displayed elements inside the media
		player that may be interactable such as a playback control or slider, or
		they may be simple visual feedback such as the length of the media
		(duration). It can be quite time consuming and challenging to setup an
		entire interface for a video player, so let's start by using the default
		UI given to us out of the box...
	</p>
</div>

<div
	class="w-full flex items-center justify-center h-screen p-10 space-x-6 bg-gray-300"
>
	<!-- Component Start -->
	<div
		class="flex flex-col items-center w-16 h-full overflow-hidden text-gray-400 bg-gray-900 rounded"
	>
		<a class="flex items-center justify-center mt-3" href="#1">
			<svg
				class="w-8 h-8 fill-current"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
			>
				<path
					d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
				/>
			</svg>
		</a>
		<div class="flex flex-col items-center mt-3 border-t border-gray-700">
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 text-gray-200 bg-gray-700 rounded"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
					/>
				</svg>
			</a>
		</div>
		<div class="flex flex-col items-center mt-2 border-t border-gray-700">
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
					/>
				</svg>
			</a>
			<a
				class="relative flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
					/>
				</svg>
				<span
					class="absolute top-0 left-0 w-2 h-2 mt-2 ml-2 bg-indigo-500 rounded-full"
				/>
			</a>
		</div>
		<a
			class="flex items-center justify-center w-16 h-16 mt-auto bg-gray-800 hover:bg-gray-700 hover:text-gray-300"
			href="https://www.google.com"
		>
			<svg
				class="w-6 h-6 stroke-current"
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
		</a>
	</div>
	<!-- Component End  -->

	<!-- Component Start -->
	<div
		class="flex flex-col items-center w-40 h-full overflow-hidden text-gray-400 bg-gray-900 rounded"
	>
		<a
			class="flex items-center w-full px-3 mt-3"
			href="https://www.google.com"
		>
			<svg
				class="w-8 h-8 fill-current"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
			>
				<path
					d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
				/>
			</svg>
			<span class="ml-2 text-sm font-bold">The App</span>
		</a>
		<div class="w-full px-2">
			<div
				class="flex flex-col items-center w-full mt-3 border-t border-gray-700"
			>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Dasboard</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Search</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 text-gray-200 bg-gray-700 rounded"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Insights</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Docs</span>
				</a>
			</div>
			<div
				class="flex flex-col items-center w-full mt-2 border-t border-gray-700"
			>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Products</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Settings</span>
				</a>
				<a
					class="relative flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Messages</span>
					<span
						class="absolute top-0 left-0 w-2 h-2 mt-2 ml-2 bg-indigo-500 rounded-full"
					/>
				</a>
			</div>
		</div>
		<a
			class="flex items-center justify-center w-full h-16 mt-auto bg-gray-800 hover:bg-gray-700 hover:text-gray-300"
			href="https://www.google.com"
		>
			<svg
				class="w-6 h-6 stroke-current"
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
			<span class="ml-2 text-sm font-medium">Account</span>
		</a>
	</div>
	<!-- Component End  -->

	<!-- Component Start -->
	<div
		class="flex flex-col items-center w-16 h-full overflow-hidden text-gray-700 bg-gray-100 rounded"
	>
		<a
			class="flex items-center justify-center mt-3"
			href="https://www.google.com"
		>
			<svg
				class="w-8 h-8 fill-current"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
			>
				<path
					d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
				/>
			</svg>
		</a>
		<div class="flex flex-col items-center mt-3 border-t border-gray-300">
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 bg-gray-300 rounded"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
					/>
				</svg>
			</a>
		</div>
		<div class="flex flex-col items-center mt-2 border-t border-gray-300">
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
					/>
				</svg>
			</a>
			<a
				class="relative flex items-center justify-center w-12 h-12 mt-2 hover:bg-gray-300"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
					/>
				</svg>
				<span
					class="absolute top-0 left-0 w-2 h-2 mt-2 ml-2 bg-indigo-500 rounded-full"
				/>
			</a>
		</div>
		<a
			class="flex items-center justify-center w-16 h-16 mt-auto bg-gray-200 hover:bg-gray-300"
			href="https://www.google.com"
		>
			<svg
				class="w-6 h-6 stroke-current"
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
		</a>
	</div>
	<!-- Component End  -->

	<!-- Component Start -->
	<div
		class="flex flex-col items-center w-40 h-full overflow-hidden text-gray-700 bg-gray-100 rounded"
	>
		<a
			class="flex items-center w-full px-3 mt-3"
			href="https://www.google.com"
		>
			<svg
				class="w-8 h-8 fill-current"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
			>
				<path
					d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
				/>
			</svg>
			<span class="ml-2 text-sm font-bold">The App</span>
		</a>
		<div class="w-full px-2">
			<div
				class="flex flex-col items-center w-full mt-3 border-t border-gray-300"
			>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Dasboard</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Search</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 bg-gray-300 rounded"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Insights</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Docs</span>
				</a>
			</div>
			<div
				class="flex flex-col items-center w-full mt-2 border-t border-gray-300"
			>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Products</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Settings</span>
				</a>
				<a
					class="relative flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-gray-300"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Messages</span>
					<span
						class="absolute top-0 left-0 w-2 h-2 mt-2 ml-2 bg-indigo-500 rounded-full"
					/>
				</a>
			</div>
		</div>
		<a
			class="flex items-center justify-center w-full h-16 mt-auto bg-gray-200 hover:bg-gray-300"
			href="https://www.google.com"
		>
			<svg
				class="w-6 h-6 stroke-current"
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
			<span class="ml-2 text-sm font-medium">Account</span>
		</a>
	</div>
	<!-- Component End  -->

	<!-- Component Start -->
	<div
		class="flex flex-col items-center w-16 h-full overflow-hidden text-indigo-300 bg-indigo-900 rounded"
	>
		<a
			class="flex items-center justify-center mt-3"
			href="https://www.google.com"
		>
			<svg
				class="w-8 h-8 fill-current"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
			>
				<path
					d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
				/>
			</svg>
		</a>
		<div class="flex flex-col items-center mt-3 border-t border-gray-700">
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-indigo-700"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-indigo-700"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 text-indigo-100 bg-indigo-700 rounded"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-indigo-700"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
					/>
				</svg>
			</a>
		</div>
		<div class="flex flex-col items-center mt-2 border-t border-gray-700">
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-indigo-700"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
					/>
				</svg>
			</a>
			<a
				class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-indigo-700"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
					/>
				</svg>
			</a>
			<a
				class="relative flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-indigo-700"
				href="https://www.google.com"
			>
				<svg
					class="w-6 h-6 stroke-current"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
					/>
				</svg>
				<span
					class="absolute top-0 left-0 w-2 h-2 mt-2 ml-2 bg-indigo-500 rounded-full"
				/>
			</a>
		</div>
		<a
			class="flex items-center justify-center w-16 h-16 mt-auto bg-indigo-800 hover:bg-indigo-700"
			href="https://www.google.com"
		>
			<svg
				class="w-6 h-6 stroke-current"
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
		</a>
	</div>
	<!-- Component End  -->

	<!-- Component Start -->
	<div
		class="flex flex-col items-center w-40 h-full overflow-hidden text-indigo-300 bg-indigo-900 rounded"
	>
		<a
			class="flex items-center w-full px-3 mt-3"
			href="https://www.google.com"
		>
			<svg
				class="w-8 h-8 fill-current"
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
			>
				<path
					d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z"
				/>
			</svg>
			<span class="ml-2 text-sm font-bold">The App</span>
		</a>
		<div class="w-full px-2">
			<div
				class="flex flex-col items-center w-full mt-3 border-t border-gray-700"
			>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-indigo-700"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Dasboard</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-indigo-700"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Search</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 text-gray-400 bg-indigo-700 text-indigo-100 rounded"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Insights</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-indigo-700"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Docs</span>
				</a>
			</div>
			<div
				class="flex flex-col items-center w-full mt-2 border-t border-gray-700"
			>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-indigo-700"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Products</span>
				</a>
				<a
					class="flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-indigo-700"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Settings</span>
				</a>
				<a
					class="relative flex items-center w-full h-12 px-3 mt-2 rounded hover:bg-indigo-700"
					href="https://www.google.com"
				>
					<svg
						class="w-6 h-6 stroke-current"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
						/>
					</svg>
					<span class="ml-2 text-sm font-medium">Messages</span>
					<span
						class="absolute top-0 left-0 w-2 h-2 mt-2 ml-2 bg-indigo-500 rounded-full"
					/>
				</a>
			</div>
		</div>
		<a
			class="flex items-center justify-center w-full h-16 mt-auto bg-indigo-800 hover:bg-indigo-700"
			href="https://www.google.com"
		>
			<svg
				class="w-6 h-6 stroke-current"
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
				/>
			</svg>
			<span class="ml-2 text-sm font-medium">Account</span>
		</a>
	</div>
	<!-- Component End  -->
</div>

<div class="container flex h-screen text-gray-700">
	<!-- Component Start -->
	<div
		class="flex flex-col items-center flex-shrink-0 w-16 border-r border-gray-300 bg-gray-200 py-3"
	>
		<a
			class="w-10 h-10 rounded-lg bg-gray-400 hover:bg-gray-500"
			href="https://www.google.com">g</a
		>
		<a
			class="w-10 h-10 rounded-lg bg-gray-400 mt-4 shadow-outline border-4 border-gray-200"
			href="https://www.google.com">gap-4</a
		>
		<a
			class="relative w-10 h-10 rounded-lg bg-gray-400 mt-4 hover:bg-gray-500"
			href="https://www.google.com"
		>
			<span
				class="absolute w-3 h-3 rounded-full bg-blue-400 top-0 right-0 -mt-1 -mr-1"
			/>
		</a>
		<a
			class="w-10 h-10 rounded-lg bg-gray-400 mt-4 hover:bg-gray-500"
			href="https://www.google.com">g</a
		>
		<a
			class="flex items-center justify-center w-10 h-10 rounded-lg bg-transparent mt-4 hover:bg-gray-400"
			href="https://www.google.com"
		>
			<svg
				class="w-6 h-6 fill-current"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
				/>
			</svg>
		</a>
	</div>
	<div
		class="flex flex-col flex-shrink-0 w-64 border-r border-gray-300 bg-gray-100"
	>
		<button class="flex-shrink-0 relative text-sm focus:outline-none group">
			<div
				class="flex items-center justify-between w-full h-16 px-4 border-b border-gray-300 hover:bg-gray-300"
			>
				<span class="font-medium"> Dropdown </span>
				<svg
					class="w-4 h-4"
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
				>
					<path
						fill-rule="evenodd"
						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
						clip-rule="evenodd"
					/>
				</svg>
			</div>
			<div
				class="absolute z-10 flex-col items-start hidden w-full pb-1 bg-white shadow-lg group-focus:flex"
			>
				<a
					class="w-full px-4 py-2 text-left hover:bg-gray-300"
					href="https://www.google.com">Menu Item 1</a
				>
				<a
					class="w-full px-4 py-2 text-left hover:bg-gray-300"
					href="https://www.google.com">Menu Item 1</a
				>
				<a
					class="w-full px-4 py-2 text-left hover:bg-gray-300"
					href="https://www.google.com">Menu Item 1</a
				>
			</div>
		</button>
		<div class="h-0 overflow-auto flex-grow">
			<div class="mt-3">
				<a
					class="flex items-center h-8 hover:bg-gray-300 text-sm px-3"
					href="https://www.google.com"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
						/>
					</svg>
					<span class="ml-2 leading-none">Threads</span>
				</a>
				<a
					class="flex items-center h-8 hover:bg-gray-300 text-sm px-3"
					href="https://www.google.com"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
						/>
					</svg>
					<span class="ml-2 leading-none font-bold">All DMs</span>
				</a>
				<a
					class="flex items-center h-8 hover:bg-gray-300 text-sm px-3"
					href="https://www.google.com"
				>
					<span class="leading-none w-4">@</span>
					<span class="ml-2 leading-none">Mentions & Reactions</span>
				</a>
				<a
					class="flex items-center h-8 hover:bg-gray-300 text-sm px-3"
					href="https://www.google.com"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
						/>
					</svg>
					<span class="ml-2 leading-none">Saved Items</span>
				</a>
				<a
					class="flex items-center h-8 hover:bg-gray-300 text-sm px-3"
					href="https://www.google.com"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
						/>
					</svg>
					<span class="ml-2 leading-none">More</span>
				</a>
			</div>
			<div class="mt-4">
				<div class="flex items-center h-8 px-3 group">
					<button
						id="channels_toggle"
						class="flex items-center flex-grow focus:outline-none"
					>
						<svg
							class="w-4 h-4"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fill-rule="evenodd"
								d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
								clip-rule="evenodd"
							/>
						</svg>
						<span class="ml-2 leading-none font-medium text-sm"
							>Channels</span
						>
					</button>
					<button
						class="items-center justify-center h-6 w-6 ml-auto rounded hidden group-hover:flex hover:bg-gray-300"
					>
						<svg
							class="h-4 w-4"
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
							/>
						</svg>
					</button>
					<button
						class="flex items-center justify-center h-6 w-6 ml-1 rounded hover:bg-gray-300"
					>
						<svg
							class="h-5 w-5"
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M12 6v6m0 0v6m0-6h6m-6 0H6"
							/>
						</svg>
					</button>
				</div>
				<div id="channels_list">
					<a
						class="flex items-center h-8 bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<svg
							class="h-4 w-4"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fill-rule="evenodd"
								d="M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H3a1 1 0 110-2h2.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.938l1-4H9.031z"
								clip-rule="evenodd"
							/>
						</svg>
						<span class="ml-2 leading-none font-bold"
							>council-of-elrond</span
						>
					</a>
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<svg
							class="h-4 w-4"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fill-rule="evenodd"
								d="M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H3a1 1 0 110-2h2.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.938l1-4H9.031z"
								clip-rule="evenodd"
							/>
						</svg>
						<span class="ml-2 leading-none">the-fellowship</span>
					</a>
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<svg
							class="h-4 w-4"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fill-rule="evenodd"
								d="M9.243 3.03a1 1 0 01.727 1.213L9.53 6h2.94l.56-2.243a1 1 0 111.94.486L14.53 6H17a1 1 0 110 2h-2.97l-1 4H15a1 1 0 110 2h-2.47l-.56 2.242a1 1 0 11-1.94-.485L10.47 14H7.53l-.56 2.242a1 1 0 11-1.94-.485L5.47 14H3a1 1 0 110-2h2.97l1-4H5a1 1 0 110-2h2.47l.56-2.243a1 1 0 011.213-.727zM9.03 8l-1 4h2.938l1-4H9.031z"
								clip-rule="evenodd"
							/>
						</svg>
						<span class="ml-2 leading-none">and-another</span>
					</a>
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<svg
							class="h-4 w-4"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fill-rule="evenodd"
								d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
								clip-rule="evenodd"
							/>
						</svg>
						<span class="ml-2 leading-none font-bold"
							>second-breakfast-fans</span
						>
					</a>
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<svg
							class="h-4 w-4"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fill-rule="evenodd"
								d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
								clip-rule="evenodd"
							/>
						</svg>
						<span class="ml-2 leading-none"
							>anduril-smithy-club</span
						>
					</a>
				</div>
			</div>
			<div class="mt-4">
				<div class="flex items-center h-8 px-3 group">
					<button
						id="messages_toggle"
						class="flex items-center flex-grow focus:outline-none"
					>
						<svg
							class="w-4 h-4"
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
						>
							<path
								fill-rule="evenodd"
								d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
								clip-rule="evenodd"
							/>
						</svg>
						<span class="ml-2 leading-none font-medium text-sm"
							>Direct Messages</span
						>
					</button>
					<button
						class="items-center justify-center h-6 w-6 ml-auto rounded hidden group-hover:flex hover:bg-gray-300"
					>
						<svg
							class="h-4 w-4"
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
							/>
						</svg>
					</button>
					<button
						class="flex items-center justify-center h-6 w-6 ml-1 rounded hover:bg-gray-300"
					>
						<svg
							class="h-5 w-5"
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M12 6v6m0 0v6m0-6h6m-6 0H6"
							/>
						</svg>
					</button>
				</div>
				<div id="messages_list">
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<div class="flex justify-center w-4">
							<span class="w-2 h-2 rounded-full bg-blue-500" />
						</div>
						<span class="ml-2 leading-none font-bold"
							>Frodo Baggins</span
						>
						<span
							class="flex items-center justify-center bg-blue-500 rounded-full font-medium h-5 px-2 ml-auto text-xs text-white"
							>3</span
						>
					</a>
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<div class="flex justify-center w-4">
							<span class="w-2 h-2 rounded-full bg-blue-500" />
						</div>
						<span class="ml-2 leading-none">Gandalf The Grey</span>
					</a>
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<div class="flex justify-center w-4">
							<span
								class="w-2 h-2 rounded-full border-2 border-gray-500"
							/>
						</div>
						<span class="ml-2 leading-none text-gray-500"
							>Gimli son of Gloin</span
						>
					</a>
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<div
							class="flex justify-center items-center rounded bg-gray-600 w-4 h-4"
						>
							<span class="text-xs text-white">2</span>
						</div>
						<span class="ml-2 leading-none font-bold"
							>Pippin, Merry</span
						>
						<span
							class="flex items-center justify-center bg-blue-500 rounded-full font-medium h-5 px-2 ml-auto text-xs text-white"
							>1</span
						>
					</a>
					<a
						class="flex items-center h-8 hover:bg-gray-300 text-sm pl-8 pr-3"
						href="https://www.google.com"
					>
						<div
							class="flex justify-center items-center rounded bg-gray-600 w-4 h-4"
						>
							<span class="text-xs text-white">3</span>
						</div>
						<span class="ml-2 leading-none"
							>Galadriel, Elrond, Arwen</span
						>
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="flex flex-col flex-grow">
		<div
			class="flex items-center flex-shrink-0 h-16 bg-white border-b border-gray-300 px-4"
		>
			<div>
				<h1 class="text-sm font-bold leading-none">
					#council-of-elrond
				</h1>
				<span class="text-xs leading-none"
					>Let's sort this ring thing out hey!?!</span
				>
			</div>
		</div>
		<div class="flex flex-col flex-grow overflow-auto">
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Sam</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">Anyone know if Frodo is awake yet?</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>🤷</span>
							<span class="ml-1 font-medium">2</span>
						</button>
					</div>
				</div>
			</div>
			<div class="flex flex-col items-center mt-2">
				<hr class="w-full" />
				<span
					class="flex items-center justify-center -mt-3 bg-white h-6 px-3 rounded-full border text-xs font-semibold mx-auto"
					>Today</span
				>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Elrond</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">
						Strangers from distant lands, friends of old. You have
						been summoned here to answer the threat of Mordor.
						Middle-Earth stands upon the brink of destruction. None
						can escape it. You will unite or you will fall. Each
						race is bound to this fate–this one doom. (gestures to
						the pedestal) Bring forth the Ring, Frodo.
					</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>❤️</span>
							<span class="ml-1 font-medium">5</span>
						</button>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Boromir</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">So it is true…</p>
					<p class="text-sm">
						It is a gift. A gift to the foes of Mordor. Why not use
						this Ring? (paces) Long has my father, the Steward of
						Gondor, kept the forces of Mordor at bay. By the blood
						of our people are your lands kept safe! Give Gondor the
						weapon of the Enemy. Let us use it against him!
					</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>👎</span>
							<span class="ml-1 font-medium">1</span>
						</button>
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>🤔</span>
							<span class="ml-1 font-medium">3</span>
						</button>
					</div>
					<div class="flex items-center mt-2">
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300"
						/>
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300 ml-1"
						/>
						<a
							class="text-blue-600 text-xs font-medium ml-1"
							href="https://www.google.com">4 replies</a
						>
						<span class="text-xs text-gray-600 ml-1"
							>Last reply today at 03:45</span
						>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Aragorn</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">
						You cannot wield it! None of us can. The One Ring
						answers to Sauron alone. It has no other master.
					</p>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Boromir</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">
						And what would a ranger know of this matter?
					</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>😲</span>
							<span class="ml-1 font-medium">2</span>
						</button>
					</div>
					<div class="flex items-center mt-2">
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300"
						/>
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300 ml-1"
						/>
						<a
							class="text-blue-600 text-xs font-medium ml-1"
							href="https://www.google.com">4 replies</a
						>
						<span class="text-xs text-gray-600 ml-1"
							>Last reply today at 03:45</span
						>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Legolas</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">
						This is no mere ranger. He is Aragorn, son of Arathorn.
						You owe him your allegiance.
					</p>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Boromim</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">Aragorn? This… is Isildur’s heir?</p>
					<div class="flex items-center mt-2">
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300"
						/>
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300 ml-1"
						/>
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300 ml-1"
						/>
						<a
							class="text-blue-600 text-xs font-medium ml-1"
							href="https://www.google.com">3 replies</a
						>
						<span class="text-xs text-gray-600 ml-1"
							>Last reply today at 03:45</span
						>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Boromir</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">
						Gondor has no king. Gondor needs no king.
					</p>
					<div class="flex items-center mt-2">
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300"
						/>
						<div
							class="h-6 w-6 rounded flex-shrink-0 bg-gray-300 ml-1"
						/>
						<a
							class="text-blue-600 text-xs font-medium ml-1"
							href="https://www.google.com">4 replies</a
						>
						<span class="text-xs text-gray-600 ml-1"
							>Last reply today at 03:45</span
						>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Gandalf</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">Aragorn is right. We cannot use it.</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>👍</span>
							<span class="ml-1 font-medium">6</span>
						</button>
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>🧙‍</span>
							<span class="ml-1 font-medium">3</span>
						</button>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Elrond</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">
						You have only one choice. The Ring must be destroyed.
					</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>💍</span>
							<span class="ml-1 font-medium">1</span>
						</button>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Gimli</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">What are we waiting for?</p>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Elrond</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">
						The Ring cannot be destroyed, Gimli, son of Gloin by any
						craft that we here possess. The Ring was made in the
						fires of Mount Doom. Only there can it be unmade. It
						must be taken deep into Mordor and cast back into the
						fiery chasm from whence it came.
					</p>
					<p class="text-sm">One of you must do this.</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>🗻</span>
							<span class="ml-1 font-medium">2</span>
						</button>
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>🔥</span>
							<span class="ml-1 font-medium">3</span>
						</button>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Boromir</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">
						One does not simply walk into Mordor. Its black gates
						are guarded by more than just orcs. There is evil there
						that does not sleep. And the great Eye is ever watchful.
						It is a barren wasteland riddled with fire and ash and
						dust. The very air you breathe is a poisonous fume. Not
						with ten thousand men could you do this. It is folly!
					</p>
				</div>
			</div>
		</div>
		<div class="h-12 bg-white px-4 pb-4">
			<div
				class="flex items-center border-2 border-gray-300 rounded-sm p-1"
			>
				<button
					class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M13 10V3L4 14h7v7l9-11h-7z"
						/>
					</svg>
				</button>
				<textarea
					class="flex-grow text-sm px-3 border-l border-gray-300 ml-1"
					style="resize: none;"
					placeholder="Message council-of-elrond"
					cols="3"
					rows="1"
				/>
				<button
					class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fill-rule="evenodd"
							d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z"
							clip-rule="evenodd"
						/>
					</svg>
				</button>
				<button
					class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
				>
					<span class="leading-none w-4 h-4 -mt-px">@</span>
				</button>
				<button
					class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fill-rule="evenodd"
							d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z"
							clip-rule="evenodd"
						/>
					</svg>
				</button>
				<button
					class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							fill-rule="evenodd"
							d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
							clip-rule="evenodd"
						/>
					</svg>
				</button>
				<button
					class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
				>
					<svg
						class="h-4 w-4 transform rotate-90"
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
					>
						<path
							d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
						/>
					</svg>
				</button>
			</div>
		</div>
	</div>
	<div
		class="flex flex-col flex-shrink-0 w-1/4 max-w-xs border-l border-gray-300 bg-gray-100"
	>
		<div class="flex items-center h-16 border-b border-gray-300 px-4">
			<div class="">
				<h2 class="text-sm font-semibold leading-none">Thread</h2>
				<a class="text-xs leading-none" href="https://www.google.com"
					>council-of-elrond</a
				>
			</div>
			<button
				class="flex items-center justify-center w-6 h-6 rounded hover:bg-gray-300 ml-auto"
			>
				<svg
					class="w-5 h-5"
					xmlns="http://www.w3.org/2000/svg"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M6 18L18 6M6 6l12 12"
					/>
				</svg>
			</button>
		</div>
		<div class="flex flex-col flex-grow overflow-auto">
			<div class="flex px-4 py-4 border-b border-gray-300">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Boromim</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">Aragorn? This… is Isildur’s heir?</p>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Legolas</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">And heir to the throne of Gondor.</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>🤯</span>
							<span class="ml-1 font-medium">7</span>
						</button>
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>🏰</span>
							<span class="ml-1 font-medium">2</span>
						</button>
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>👑</span>
							<span class="ml-1 font-medium">3</span>
						</button>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Aragorn</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">Havo dad Legolas.</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>❓</span>
							<span class="ml-1 font-medium">1</span>
						</button>
					</div>
				</div>
			</div>
			<div class="flex px-4 py-3">
				<div class="h-10 w-10 rounded flex-shrink-0 bg-gray-300" />
				<div class="ml-2">
					<div class="-mt-1">
						<span class="text-sm font-semibold">Pippin</span>
						<span class="ml-1 text-xs text-gray-500">01:26</span>
					</div>
					<p class="text-sm">Is that elvish for second breakfast?</p>
					<div class="flex space-x-2 mt-1">
						<button
							class="flex items-center pl-1 pr-2 h-5 bg-gray-300 hover:bg-gray-400 rounded-full text-xs"
						>
							<span>🍳</span>
							<span class="ml-1 font-medium">3</span>
						</button>
					</div>
				</div>
			</div>
			<div class="bg-gray-100 px-4 pb-3 mt-auto">
				<div
					class="flex flex-col items-center border-2 border-gray-300 rounded-sm p-1"
				>
					<textarea
						class="w-full text-sm px-3 bg-transparent"
						style="resize: none;"
						placeholder="Reply…"
						cols="3"
						rows="1"
					/>
					<div class="flex w-full mt-2">
						<button
							class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
						>
							<svg
								class="h-4 w-4"
								xmlns="http://www.w3.org/2000/svg"
								fill="none"
								viewBox="0 0 24 24"
								stroke="currentColor"
							>
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M13 10V3L4 14h7v7l9-11h-7z"
								/>
							</svg>
						</button>
						<button
							class="flex-shrink flex items-center justify-center h-6 w-6 rounded ml-auto hover:bg-gray-200"
						>
							<svg
								class="h-4 w-4"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z"
									clip-rule="evenodd"
								/>
							</svg>
						</button>
						<button
							class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
						>
							<span class="leading-none w-4 h-4 -mt-px">@</span>
						</button>
						<button
							class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
						>
							<svg
								class="h-4 w-4"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z"
									clip-rule="evenodd"
								/>
							</svg>
						</button>
						<button
							class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
						>
							<svg
								class="h-4 w-4"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									fill-rule="evenodd"
									d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
									clip-rule="evenodd"
								/>
							</svg>
						</button>
						<button
							class="flex-shrink flex items-center justify-center h-6 w-6 rounded hover:bg-gray-200"
						>
							<svg
								class="h-4 w-4 transform rotate-90"
								xmlns="http://www.w3.org/2000/svg"
								viewBox="0 0 20 20"
								fill="currentColor"
							>
								<path
									d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
								/>
							</svg>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Component End  -->
</div>

<div class="content">
	<h1>About this app</h1>

	<p>
		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make
		your own by typing the following into your command line and following the
		prompts:
	</p>

	<!-- TODO lose the @next! -->
	<pre>npm init svelte@next</pre>

	<p>
		The page you're looking at is purely static HTML, with no client-side
		interactivity needed. Because of that, we don't need to load any
		JavaScript. Try viewing the page's source, or opening the devtools
		network panel and reloading.
	</p>

	<div class="rounded-t-xl overflow-hidden bg-gradient-to-r ">
		<div class="flex flex-col m-1 sm:flex-row">
			<div
				class="h-12 ml-1 sm:mr-1 sm:mt-1 sm:w-1/2 flex pl-2 border border-solid border-blueGray-300 text-black bg-gray-300 items-center text-2xl font-semibold "
			>
				123: participate
			</div>
			<div class="sm:w-1/2 sm:mt-1 flex flex-row">
				<button
					class="h-12 w-1/2 ml-1 text-white bg-blue-500 flex p-2 item-center border border-solid border-blueGray-300 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 cursor-pointer"
				>
					v.参与；参加；分享
				</button>
				<button
					class="h-12 w-1/2 text-white bg-blue-500 flex p-2 item-center border border-solid border-blueGray-300 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 cursor-pointer"
				>
					v.冲浪；上网
				</button>
			</div>
		</div>
		<div class="flex flex-col m-1 sm:flex-row">
			<div
				class="h-12 mt-1 w-full sm:w-1/2 rounded-md text-black bg-gray-300 flex items-center text-2xl font-semibold "
			>
				123: 4-1/2
			</div>
			<div class="h-12 mt-1 sm:ml-1 w-full sm:w-1/2 flex flex-row">
				<button
					class="w-1/2 rounded-md text-white bg-blue-500 flex items-center  text-2xl pl-2 font-semibold transition duration-500 ease-in-out  hover:bg-green-600 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"
				>
					2-1/4
				</button>

				<button
					class="w-1/2 rounded-md text-white bg-blue-500 flex items-center  text-2xl pl-2 font-semibold transition duration-500 ease-in-out  hover:bg-green-600 transform hover:-translate-y-1 hover:scale-110 cursor-pointer"
				>
					3-1/4
				</button>
			</div>
		</div>
		<div class="flex flex-col m-1 sm:flex-row">
			<div
				class="h-12 mt-1 w-full sm:w-1/2 rounded-md text-white bg-red-500 flex items-center text-2xl font-semibold "
			>
				123: 4-1/2
			</div>
			<div class="h-12 mt-1 sm:ml-1 w-full sm:w-1/2 flex flex-row">
				<div
					class="w-1/2 mr-1 rounded-md text-white bg-blue-500 flex items-center text-2xl pl-2 font-semibold "
				>
					5-1/4
				</div>
				<div
					class="w-1/2 ml-1 rounded-md text-white bg-blue-500 flex items-center text-2xl pl-2 font-semibold "
				>
					6-1/4
				</div>
			</div>
		</div>
		<div class="flex flex-col m-1 sm:flex-row">
			<div
				class="h-12 mt-1 w-full sm:w-1/2 rounded-md text-white bg-red-500 flex items-center text-2xl font-semibold "
			>
				123: 4-1/2
			</div>
			<div class="h-12 mt-1 sm:ml-1 w-full sm:w-1/2 flex flex-row">
				<div
					class="w-1/2 mr-1 rounded-md text-white bg-blue-500 flex items-center text-2xl pl-2 font-semibold "
				>
					5-1/4
				</div>
				<div
					class="w-1/2 ml-1 rounded-md text-white bg-blue-500 flex items-center text-2xl pl-2 font-semibold "
				>
					6-1/4
				</div>
			</div>
		</div>
	</div>

	<br />

	<div
		class="grid gap-x-8 gap-y-4 grid-cols-4 bg-rose-400 auto-cols-max place-content-between"
	>
		<div class="bg-blue-500 col-span-2">1</div>
		<div class="bg-green-300">2</div>
		<div class="bg-red-300">3</div>
		<div class="bg-red-500 col-span-2">4</div>
		<div class="bg-blue-300">5</div>
		<div class="bg-green-300">6</div>
	</div>

	<br />

	<div class="table w-full ">
		<div class="table-row border-b border-solid bg-red-50">
			<div class="table-cell ">A cell with more content</div>
			<div class="table-cell ">Cell 2</div>
			<div class="table-cell ">Cell 3</div>
		</div>
		<div class="table-row border-b border-solid bg-rose-50">
			<div class="table-cell ">Cell 4</div>
			<div class="table-cell ">A cell with more content</div>
			<div class="table-cell ">Cell 6</div>
		</div>
	</div>

	<div class="container px-4 mx-auto bg-red-100">
		<div class="flex flex-wrap my-auto bg-blue-50">
			<div class="w-full flex-1">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700  border border-solid border-blueGray-900"
					>One of three columns1</span
				>
			</div>
			<div class="w-full flex-1">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700  border-t border-r-0 border-b border-l-0 border-solid border-blueGray-900"
					>One of three columns2</span
				>
			</div>
			<div class="w-full flex-1">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700  border border-solid border-blueGray-600"
					>One of three columns3</span
				>
			</div>
		</div>
		<div class="flex flex-wrap bg-green-50">
			<div class="w-full flex-1 ">
				<button
					class="text-sm block my-4 p-3 text-blueGray-700  border border-solid border-blueGray-900 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 cursor-pointer"
				>
					One of three columns122
				</button>
			</div>
			<div class="w-full flex-1">
				<button
					class="text-sm block my-4 p-3 text-blueGray-700  border border-solid border-blueGray-900 cursor-pointer"
					>One of three columns2</button
				>
			</div>
			<div class="w-full flex-1">
				<button
					class="text-sm block my-4 p-3 text-blueGray-700  border border-solid border-blueGray-600 cursor-pointer"
					>One of three columns3</button
				>
			</div>
		</div>
	</div>

	<div class="container px-4 mx-auto">
		<div class="flex flex-wrap">
			<div class="w-full px-1 flex-1">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100"
					>column1</span
				>
			</div>
			<div class="w-full px-1 flex-1">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100"
					>column2</span
				>
			</div>
			<div class="w-full px-1 flex-1">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100"
					>column3</span
				>
			</div>
			<div class="w-full px-1 flex-1">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100"
					>column4</span
				>
			</div>
		</div>
		<div class="flex flex-wrap">
			<div class="w-8/12 px-4">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100"
					>column of 8</span
				>
			</div>
			<div class="w-4/12 px-4">
				<span
					class="text-sm block my-4 p-3 text-blueGray-700 rounded border border-solid border-blueGray-100"
					>column of 4</span
				>
			</div>
		</div>
	</div>
</div>

<style>
	.content {
		width: 100%;
		max-width: var(--column-width);
		margin: var(--column-margin-top) auto 0 auto;
	}
</style>
